@CHARSET "UTF-8";
*{
	margin:0;
	pading:0;
	box-sizing:border-box;
	font-family:'楷体';
}
body{
	display:flex;
	justify-content:center;
	align-items:center;
	min-height:100vh;
	background:#0c1022;
	color:white;
	
}
.box{
	position:relative;
	width:400px;
	height:400px;
	background:rgba(0,0,0,0.75);
	border-radius:20px;
	display:flex;
	justify-content:center;
	align-items:center;
	overflow:hidden;
}
.box::before{
	content:'';
	position:absolute;
	width:550px;
	height:550px;
	background-image:conic-gradient(transparent,
	transparent,transparent,#00ccff);
	animation:animate 4s  linear  infinite;
	
}
.box::after{
	content:'';
	position:absolute;
	width:550px;
	height:550px;
	background-image:conic-gradient(transparent,
	transparent,transparent,#ff00ff);
	animation:animate  4s  linear  infinite;
	animation-delay:-2s;
	
}

@keyframes animate{
	0% {
	transform:rotate(0deg);
	}
	
	100% {
	transform:rotate(360deg);
	}
	
}
.content{
	position:absolute;
	inset:5px;
	z-index:1;
	background:rgba(0,0,0,1);
	border-radius:20px;
	color:white;
	
}
h2{
	color:white;
	text-align:center;
	margin:10px  0 25px  0 ;
}
input[type="text"],input[type="password"]{
	height:30px;
	color:white;
	border-radius:10px;
	font-size:16px;
	margin:25px 0px 20px 10px;
	background-image:linear-gradient(45deg,rgba(46, 119, 214, 0.4),rgba(14, 95, 244, 0.5) 100%);
	border:0;
	 width:220px;
}
input[type="text"]:hover,input[type="password"]:hover{
	background-image:linear-gradient(45deg,rgba(46, 119, 214, 0.4), rgba(170, 0, 255, 0.6) 100%);
	transform:scale(1.1);
	box-shadow:2px  0px  10px 10px rgba(170, 0, 255, 0.5); 
	transition:1s;
}

input[type="submit"]:hover{
	background-image:linear-gradient(80deg,rgba(46, 119, 214, 0.4), rgba(170, 0, 255, 0.6) 100%);
	transform:scale(1.1);
	box-shadow:3px  0px  20px 15px rgba(46, 119, 214, 0.5); 
	transition:1s;
}

.go{
width:100px;
margin:50px auto;
position:relative;
}
input[type="submit"]{
	z-index:100;
	margin-left:100px;
    height:30px;
    width:80px;
	border-radius:10px;
	font-size:16px;
	padding:auto;
	outline:none;
    background-image:linear-gradient(60deg,rgba(36, 216, 111, 0.5),rgba(14, 95, 244, 0.5) 100%);
	border:none;	
   
    font-weight:bolder;
}
.L_{
position:absolute;
width:130px;
height:130px;
z-index:-1;
border-radius:50%;
top:-42px;
left:75px;
}
.box1{
position:absolute;
width:100%;
height:100%;
border-radius:50%;

}
.box1:nth-of-type(1){
border-bottom:6px  solid  rgba(232, 97, 255, 0.8);
transform:rotatex(35deg) rotatey(-45deg);
animation:one  1.5s  linear infinite;
box-shadow:1px  0px  1px 1px rgba(197, 47, 216, 0.5); 
}
.box1:nth-of-type(2){
border-left:6px  solid rgba(34, 141, 255, 0.8);
transform:rotatex(50deg) rotatey(10deg);
animation:two  1.5s  linear infinite;
box-shadow:1px  0px  1px 1px rgba(46, 119, 214, 0.5); 
}
.box1:nth-of-type(3){
border-top:6px  solid  rgba(255,255,255,0.7);
transform:rotatex(35deg) rotatey(55deg);
animation:three  1.5s  linear infinite;
box-shadow:1px  0px  1px 1px rgba(216, 216, 216, 0.7); 
}
@keyframes  one{
to{
transform:rotatex(35deg)  rotatey(-45deg)  rotatez(360deg);
}
}
@keyframes  two{
to {
transform:rotatex(50deg)  rotatey(10deg)  rotatez(360deg);
}
}
@keyframes  three{
to{
transform:rotatex(35deg)  rotatey(55deg)  rotatez(360deg);
}
}
.go:hover .box1:hover{
transform:none;
}

.dl{
padding-left:30px;
font-size:20px;
color:#fff;
}







